<template>
  <view
    class="w-[100%] h-[200rpx] flex items-center justify-center text-[50rpx] bg font-black"
  >
    添加帮扶
  </view>
  <From
    :rules="rules"
    :formSchema="schema"
    class="mt-20rpx"
    @register="register"
    @submitForm="submitForm"
  />
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import From from '@/components/Form/FormComponent.vue'
import { useValidateRule } from '@/hooks/useValidate'
import * as pattern from '@/utils/pattern'
import { getChildInfo } from '@/api/user.api'
import { addRescue } from '@/api/rescue.api'

const user = computed(() => {
  return uni.getStorageSync('user')
})

const { Rule } = useValidateRule()

const schema = ref<IFormSchema[]>([
  {
    field: 'child',
    label: '儿童选择',
    type: 'Select',
    placeholder: '请输入用户名',
    cell: '救助信息',
    optionApi: async () => {
      const res = await getChildInfo<IChild>({ userId: user.value.id })
      return res.data.items || []
    }
  },
  {
    field: 'address',
    label: '救助地址',
    type: 'InputAddress',
    placeholder: '请输入救助地址',
    cell: '救助信息'
  },
  {
    field: 'content',
    label: '帮扶内容',
    type: 'Textarea',
    placeholder: '请输入帮扶内容',
    cell: '救助信息'
  },
  {
    field: 'img',
    label: '图片上传',
    type: 'Upload',
    placeholder: '请上传图片',
    cell: '救助信息'
  },
  {
    field: 'endTime',
    label: '结束时间',
    type: 'Calendar',
    placeholder: '请选择结束时间',
    cell: '救助信息'
  }
])

const register = (e: any) => {
  console.log('🚀 ~ register ~ e:', e)
}

const submitForm = async (e: any) => {
  const params = {
    userId: user.value.id,
    childId: e.child,
    address: e.address,
    content: e.content,
    img: e.img,
    lat: e.lat,
    lng: e.lng
  }
  const res = await addRescue<typeof params>(params)
  if (res.code === 200) {
    uni.navigateBack()
  }
}

const rules = Rule([
  { field: 'name' },
  {
    message: '请输入正确手机号',
    checkType: 'RegExp',
    field: 'phone',
    pattern: pattern.mobileRegex
  }
])
</script>
